<template>
  <div class="card-wrapper" :style="info.styles">
    <!-- 1x1 根据不同宽度渲染实现方法 -->
    <!-- <template v-if="postion.ws === 1 && postion.hs === 1">
      <span>1x1</span>
    </template> -->
    <!-- 2x1 -->
    <!-- <template v-if="postion.ws === 2 && postion.hs === 1">
      <span>2x1</span>
    </template> -->
    <!-- 3x2 -->
    <!-- <template v-if="postion.ws === 3 && postion.hs === 2">
      <span>3x2</span>
    </template> -->
    {{info.text || 'S1'}}
  </div>
</template>

<script>
export default {
  props: {
    /** 扩展数据（接口返回） */
    info: Object,
    /** 坐标大小等数据 */
    postion: Object,
  },

  /** 如果想加入淡入淡出动画，可以通过监听 postion.ws 方式来处理 */
  // watch: {
  //   'postion.ws'(val) { 这里面去处理加入内容的淡入淡出动画 }
  // }
};
</script>

<style>
.card-wrapper {
  position: absolute;
  overflow: hidden;
  box-sizing: border-box;
  /* background-color: #909399; */
  /* 扩展属性 */
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bolder;
  user-select: none;
  cursor: pointer;
}
</style>